<script setup lang="ts">
import { getDataSummarization, getPendingOrder } from "@/api/order";
import { DataSummarization, PendingOrder } from "@/api/order/types";
import numeral from "numeral";
defineOptions({
  name: "Home",
  inheritAttrs: false,
});
//数据汇总加载状态
const loading = ref(false);

//数据汇总
const dataSummarization = ref<DataSummarization>({});

//获取数据汇总
getDataSummarization()
  .then(({ data }) => {
    dataSummarization.value = data;
    loading.value = true;
  })
  .finally(() => {
    loading.value = false;
  });

/*待处理订单方块背景颜色*/
const pendingOrderBgColors = [
  "bg-#977deb",
  "bg-#f97187",
  "bg-#a051ea",
  "bg-#42e4d5",
  "bg-#f8d27f",
  "bg-#73f094",
];
//待处理订单数据明细背景颜色
const dataDetailBgColors = [
  "bg-#846ad8",
  "bg-#ea5c72",
  "bg-#9347dd",
  "bg-#37d6c4",
  "bg-#fbc759",
  "bg-#62de80",
];
//待处理订单标题
const pendingOrderTitles = [
  "待审核订单",
  "待上传订单",
  "待放款订单",
  "待结算订单",
  "申请撤销订单",
  "待审核订单",
];
//待处理订单加载状态
const loading2 = ref(false);

//待处理订单
const pendingOrder = ref<PendingOrder[]>();

getPendingOrder()
  .then(({ data }) => {
    pendingOrder.value = data;
    loading2.value = true;
  })
  .finally(() => {
    loading2.value = false;
  });

// 优秀榜下拉数据源
const options = [
  {
    value: "1",
    label: "1111",
  },
  {
    value: "2",
    label: "2222",
  },
  {
    value: "3",
    label: "3333",
  },
];
let selectedValue = ref("");
</script>

<template>
  <div class="home-container" v-loading="loading">
    <!--    数据汇总-->
    <div class="flex-between bg-#ffffff p-10px">
      <span class="title-font">数据汇总</span>
      <el-select
        class="w-[100px]"
        size="small"
        v-model="selectedValue"
        placeholder="全部"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <el-row :gutter="3" class="bg-color summary">
      <el-col :xs="12" :sm="3" :lg="3" class="cursor-pointer">
        <el-card shadow="never">
          <div class="flex-center">
            <svg-icon icon-class="ranking-list" size="2.2em" />
            <div class="p-l-3 text-3">
              <div class="font-bold">{{ dataSummarization.myRanking }}</div>
              <div class="nowrap">我的排名</div>
            </div>
          </div>
          <div class="flex-center">
            <el-progress
              class="w-[90px] p-t-1"
              :percentage="dataSummarization.rankingRake"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="3" :lg="3" class="cursor-pointer">
        <el-card shadow="never">
          <div class="flex-center">
            <svg-icon icon-class="approve-order" size="1.9em" />
            <div class="p-l-3 text-nowrap text-3">
              <div class="font-bold">{{ dataSummarization.approvedOrder }}</div>
              <div class="nowrap">审批订单</div>
            </div>
          </div>
          <div class="flex-center">
            <el-progress
              class="w-[90px] p-t-1"
              :percentage="dataSummarization.approvedOrderRate"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="3" :lg="3" class="cursor-pointer">
        <el-card shadow="never">
          <div class="flex-center">
            <svg-icon icon-class="complete" size="2em" />
            <div class="pl-2 text-nowrap text-3">
              <div class="font-bold">{{ dataSummarization.orderSuccess }}</div>
              <div class="nowrap">成功订单</div>
            </div>
          </div>
          <div class="flex-center">
            <el-progress
              class="w-[90px] p-t-1"
              :percentage="dataSummarization.orderSuccessRate"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="3" :lg="3" class="cursor-pointer">
        <el-card shadow="never">
          <div class="flex-center">
            <svg-icon icon-class="failed-order" size="2em" />
            <div class="pl-2 text-nowrap text-3">
              <div class="font-bold">{{ dataSummarization.failedOrder }}</div>
              <div class="nowrap">失败订单</div>
            </div>
          </div>
          <div class="flex-center">
            <el-progress
              class="w-[90px] p-t-1"
              :percentage="dataSummarization.failedOrderRate"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="4" :lg="4" class="cursor-pointer">
        <el-card shadow="never">
          <div class="flex-center">
            <svg-icon icon-class="expected-order" size="2em" />
            <div class="pl-2 text-nowrap text-3">
              <div class="font-bold">{{ dataSummarization.expectedOrder }}</div>
              <div class="nowrap">预期订单</div>
            </div>
          </div>
          <div class="flex-center">
            <el-progress
              class="w-[90px] p-t-1"
              :percentage="dataSummarization.expectedOrderRate"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="4" :lg="4" class="cursor-pointer">
        <el-card shadow="never">
          <div class="flex-center">
            <svg-icon icon-class="amount" size="2em" />
            <div class="pl-2 text-nowrap text-3">
              <div class="font-bold">
                {{ numeral(dataSummarization.loanAmount).format() }}
              </div>
              <div class="nowrap">放款金额</div>
            </div>
          </div>
          <div class="flex-center">
            <el-progress
              class="w-[90px] p-t-1"
              :percentage="dataSummarization.loanAmountRate"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="4" :lg="4" class="cursor-pointer">
        <el-card shadow="never">
          <div class="flex-center">
            <svg-icon icon-class="total-order" size="2em" />
            <div class="pl-2 text-nowrap text-3">
              <div class="font-bold">{{ dataSummarization.totalOrder }}</div>
              <div class="nowrap">下单总数</div>
            </div>
          </div>
          <div class="flex-center">
            <el-progress
              class="w-[90px] p-t-1"
              :percentage="dataSummarization.totalOrderRate"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!--    待处理订单-->

    <el-card
      shadow="never"
      class="pending-order !border-none m-t-2"
      v-loading="loading2"
    >
      <template #header>
        <span class="title-font">待处理订单</span>
      </template>

      <el-row :gutter="10">
        <el-col
          :xs="12"
          :sm="4"
          :lg="4"
          v-for="(item, index) in pendingOrder"
          :key="index"
        >
          <div class="pending-order-item" :class="pendingOrderBgColors[index]">
            <div class="px-10px">
              <div class="pt-2">{{ pendingOrderTitles[index] }}</div>
              <div>
                <span class="text-5">{{ item.count }}</span
                >个
              </div>
              <div>金额：{{ numeral(item.amount).format() }}元</div>
            </div>
            <a href="http://localhost:8080">
              <div class="data-detail" :class="dataDetailBgColors[index]">
                <span>数据明细</span>
                <svg-icon icon-class="arrow" size="1.3em" />
              </div>
            </a>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-row :gutter="10" class="mt-3">
      <!-- 逾期情况 -->
      <el-col :sm="24" :lg="12" class="mb-2">
        <OverdueSituation
          id="overdueSituation"
          height="180px"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
        />
      </el-col>
      <!-- 业务员成绩排行 -->
      <el-col :xs="24" :lg="12" class="mb-2">
        <SalesRanking
          id="salesRanking"
          height="180px"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
        />
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.home-container {
  position: relative;
  padding: 10px;

  .el-card {
    border: none;
    border-radius: 0;
  }

  :deep .el-input__wrapper {
    border-radius: 8px !important;
  }

  .summary {
    :deep .el-card__body {
      padding: 20px 10px;
      border-top: 1px solid #edf4fa !important;

      .el-row {
        margin: 0 !important;

        .el-col {
          cursor: pointer;
        }
      }

      .el-progress {
        display: flow;

        .el-progress__text {
          padding-top: 2px;
          font-size: 11px !important;
          color: $progressTextColor;
        }
      }
    }
  }

  .pending-order {
    border-radius: 0;

    :deep .el-card__header {
      padding: 0.7em;
    }

    :deep .el-card__body {
      padding: 0;
      margin: 15px 10px 0;
    }

    .el-col {
      margin-bottom: 15px;
    }
  }

  .nowrap {
    text-wrap: nowrap;
  }
}
</style>
